<script setup>
import { computed, onUpdated,ref } from 'vue';
import { ElMessage,ElMessageBox  } from 'element-plus'
import CodeMirror  from './CodeMirror.vue'
import { createOrUpdateByYamlHandler as createHandler } from '../../api/tools';
const props = defineProps({
    clusterId: {
        type: String
    },
    namespace: {
        type: String
    },
    yamlContent: {
        type: String
    },
    showDialog: {
        type: Boolean,
        default: false
    },
    showFooter: {
        type: Boolean,
        default: true
    },
})
const emits = defineEmits(['closeDialogHandler'])
// const closeDialog = () => {
//     emits('closeDialogHandler')
// }
let visible = computed({
    get() {
        return props.showDialog
    },
    set(val) {
        console.log("执行了修改操作:",val)
        emits('closeDialogHandler', val)
    }
})
const yamlData = ref('')
onUpdated(()=>{
    yamlData.value = props.yamlContent
})

const updateByYaml = ()=>{
    console.log("当前数据:", yamlData.value)
    if(yamlData.value == ''){
      ElMessage.error("请输入Yaml数据")
      return
    }else{
      ElMessageBox.confirm(
    `你确定要更新集群${props.clusterId} 命名空间:${props.namespace}的数据吗？`,
    '',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        //创建资源或者更新资源
        const postData = {
        clusterId: props.clusterId,
        namespace: props.namespace,
        yaml: yamlData.value,
        method: "Update"
      }
      createHandler(postData).then((res)=>{
        //换行<br/>
        let msgTemp = res.data.message
       const msg =  msgTemp.replace("\n", '<br/>')
        ElMessageBox.confirm(
          msg,
      '更新成功',
      {
        confirmButtonText: '确认',
        cancelButtonText: '确认',
        type: 'warning',
        showCancelButton : false,
        dangerouslyUseHTMLString: true,
      }
    )
      .then(() => {
        return
        })
      })
      .catch(() => {
        return
      })
      })
      .catch(() => {
        return
      })
    
  }
}                                                                                           
</script>

<template>
  <el-dialog
  draggable
  v-model="visible" 
  width="70%">
  <template #header="{ titleId, titleClass }">
    <div class="my-header">
      <div :id="titleId" :class="titleClass" style="margin: 10px auto 0 auto;">
        <el-button type="primary" title="资源所在的集群" >
          <i class="iconfont icon-kubernetes" style="font-size: 20px;" />
          <span style="font-size: 20px;margin-left: 10px;">{{ props.clusterId }}</span>
        </el-button>
        <el-button v-if="props.namespace != ''" type="primary" title="资源所在的命名空间" >
          <i class="iconfont icon-Namespace" style="font-size: 20px;" />
          <span style="font-size: 20px;margin-left: 10px;">{{ props.namespace }}</span>
        </el-button>
      </div>
    </div>
  </template>
    <div>
      <CodeMirror
      v-model="yamlData"
      height="600px"
      ></CodeMirror>
    </div>
    <template #footer>
      <div style="display: flex; justify-content: center; " v-if="props.showFooter">
        <el-button type="warning" @click="updateByYaml()">更新</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>
